// $('#pow-div2').on('click','li', function (e) {
//     // console.log(e.target.innerText);
//     $('#dLabel').html(e.target.innerText+'<span class="caret"></span>');
// });
// $('#pow-div3').on('click','li', function (e) {
//     // console.log(e.target.innerText);
//     $('#dLabe2').html(e.target.innerText+'<span class="caret"></span>');
// });
var oTab1=$('.pow-tab1');
var oTab2=$('.pow-tab2');
var powdata= JSON.parse(localStorage.getItem('auth')) || [];
var index=JSON.parse(localStorage.getItem('index')) || 0;
var res=[]; //最终渲染的数据
var oPage=$('.pow-page');
var str1='';


// if(powdata.length){
//     render();
// }
//数据初始化的渲染，创建每一个tr
function render() {
    oTab1.find('tbody').html('');
    for (var i=0;i<powdata.length;i++){
        oTab1.find('tbody').append('<tr data-index='+res[i].index+'>\n' +
            '                <td>'+res[i].name+'</td>\n' +
            '                <td>'+res[i].user+'</td>\n' +
            '                <td>'+res[i].pass+'</td>\n' +
            '                <td>'+res[i].power+'</td>\n' +
            '                <td>\n' +
            '                    <button type="button" class="btn btn-info btn-xs pow-btn1" data-toggle="modal">\n' +
            '                      编辑权限\n' +
            '                    </button>\n' +
            '\n' +
            '                    <!-- Modal -->\n' +
            '                    <div class="modal fade" id="myModal" tabindex="-1">\n' +
            '                        <div class="modal-dialog">\n' +
            '                            <div class="modal-content">\n' +
            '                                <div class="modal-header">\n' +
            '                                    <button type="button" class="close" data-dismiss="modal" ><span>&times;</span></button>\n' +
            '                                    <h4 class="modal-title" id="myModalLabel">温馨提示</h4>\n' +
            '                                </div>\n' +
            '                                <div class="modal-body">\n' +
            '                                    <form class=".form-inline">\n' +
            '                                        <div class="checkbox">\n' +
            '                                            <label>\n' +
            '                                                <input type="checkbox"> 照片墙管理\n' +
            '                                            </label>\n' +
            '                                            <label>\n' +
            '                                                <input type="checkbox"> 物资管理\n' +
            '                                            </label>\n' +
            '                                            <label>\n' +
            '                                                <input type="checkbox"> 班级管理\n' +
            '                                            </label>\n' +
            '                                            <label>\n' +
            '                                                <input type="checkbox"> 学生管理\n' +
            '                                            </label>\n' +
            '                                            <label>\n' +
            '                                                <input type="checkbox"> 公告管理\n' +
            '                                            </label>\n' +
            '                                        </div>\n' +
            '                                    </form>\n' +
            '                                </div>\n' +
            '                                <div class="modal-footer">\n' +
            '                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>\n' +
            '                                    <button type="button" class="btn btn-primary pow-btn3">确定</button>\n' +
            '                                </div>\n' +
            '                            </div>\n' +
            '                        </div>\n' +
            '                    </div>\n' +
            '                </td>\n' +
            '            </tr>');
    }

    localStorage.setItem('auth',JSON.stringify(powdata));
    localStorage.setItem('index',index);
}

$('.pow-btn1').click(function () {
    $('.pow-td1').attr({
        contenteditable:true
    })
});
//点击增加权限时的事件
$('.pow-btn3').click(function () {

    //三个输入框的正则
    var powReg={
        usname:/^[\u4e00-\u9fa5]{2,6}$/,
        acco:/^[A-Z.a-zA-Z0-9_-]{2,4}$/,
        cipher:/^\d{4,6}$/
    };
    var str3=$('.pow-td1').eq(0).text();
    var str4=$('.pow-td1').eq(1).text();
    var str5=$('.pow-td1').eq(2).text();
    // if (powReg.cipher.test(str3)) {
    //     alert(1)
    // }else {
    //
    // }
    //判断正则是否符合的表达
    if ($('.pow-td1').text()=='') {
        $('.pow-td1').css({
            borderColor:'red'
        });
        return;
    }else {
        if (powReg.usname.test(str3) && powReg.acco.test(str4) && powReg.cipher.test(str5)){
            $('#myModal2').modal('hide');
            $('.pow-td1').attr({
                dataDismiss:'modal'
            });
        }else {
            $('#myModal2').modal('show');
            $('.pow-td1').css({
                borderColor:'red'
            });
            return;
        }
//将数据存入对应的JSON对象
        index++;
        powdata.push({
            name:$('.pow-td1:eq(0)').text(),
            user:$('.pow-td1:eq(1)').text(),
            pass:$('.pow-td1:eq(2)').text(),
            power:$('.pow-td1:eq(3)').text(),
            index:index,
        })
    }

    getPageNum();
    getPageData(1);



});
//创建li页码，与判定一页多少数据
function getPageNum() {
    var pageNum=Math.ceil(powdata.length/7);
    oPage.html('');
    for(var i=0;i<pageNum;i++){

        var oLi=$('<li><span>'+(i+1)+'</span></li>');

        oPage.append(oLi);

        if(i==0){
            oLi.addClass('active');
        }
    }
}
getPageNum();
//获取某一页的数据
function getPageData(index) {
    res=powdata.slice((index-1)*7,7*index);
    render();
}
getPageData(1);
//点击页码 获取当页的数据
oPage.on('click','li',function () {
    getPageData($(this).children('span').text());
    $(this).addClass('active').siblings().removeClass('active');

});
// var arry=[];
// var str1='';
//增加权限时对全限的判断
// $('input').click(function () {
//     if ($('input[type=checkbox]:checked')) {
//         // arry.push($(this).parent().text());
//         str=$(this).parent().text();
//     }
//     str1=str+' '+str1;
//
//     $('.pow-td1:eq(3)').html(str1)
//
// });
var nowindex;
//权限更改函数
oTab1.on('click','.pow-btn3',function () {

    var sqd=$('.checkbox').children().children('input:checked').parent().text();
    powdata[nowindex].power = sqd;
    localStorage.setItem('auth',JSON.stringify(powdata));
    render();
    $('#myModal').modal('hide');
    $('.modal-backdrop').remove();

});
oTab1.on('click','.pow-btn1',function () {
    // console.log(powdata[nowindex])
    // powdata[nowindex].power = 'str';
    // localStorage.setItem('auth',JSON.stringify(powdata));




    // $(this).parents('tr').children().eq(5);
    var oLab=$(this).parents('tr').children('td').eq(4).find('label');
   //  $(this).parent('td').prev().text('');
   //
   //  str=$('.checkbox').children().children('input:checked').parent().text();
   //
   // $(this).parents('td').prev().text(str);
   //  $('#myModal').modal('hide');
    nowindex=$(this).parent().parent().index();
    $(this).parents('tbody').children('tr');
    // var str= powdata[nowindex].power;


    // console.log(str);
    // var arr = str.split(' ');
    // console.log(arr)
    // for (var i=0;i<oLab.length;i++) {
    //     console.log()
    //     if ($(oLab[i]).text() == str) {
    //
    //     }
    // }
    // console.log($(this).parent().parent().index());
   $("#myModal").modal('show')
});



